<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
        一、事件绑定
            1、通过元素属性绑定事件
                + 通过事件属性绑定函数,在行为发生时会自动执行函数
                + 一个事件可以同时绑定多个函数
                + 一个元素可以同时绑定多个事件
                + 方法中可以传入 this对象,代表当前元素
            2、通过DOM
        
        
        二、常见事件
            1、鼠标事件
            2、键盘事件
            3、表单事件


    -->
    <script>
        function fc1(){
            console.log("单击1");
        }
        function fc2(){
            console.log("单击2");
        }
        function fc3(){
            console.log("双击了");
        }
        function fc4(){
            console.log("鼠标离开");
        }
        function fc5(){
            console.log("鼠标停住");
        }
        function fc6(){
            console.log("鼠标聚焦");
        }
        function fc7(){
            console.log("失去聚焦");
        }
        function fc8(content){
            console.log("内容改变为:"+content);
        }
        function fc9(content){
            console.log("内容改变为:"+content);
        }
        function fc10(){
            // 弹窗的三种方式
            // 1、alert() 信息提醒框
            // 2、prompt() 信息输入框
            // 3、confirm() 信息确认框
            
            var result = confirm("确认提交信息？");
            if(!result){
                // 阻止组件的默认行为
                event.preventDefault();
            }
        }
    </script>
</head>
<body>
    <input type="button" 
            value="按钮" 
            onclick="fc1(), fc2()" 
            ondblclick="fc3()" 
            onmouseleave="fc4()"
            onmouseover="fc5()">
    </input>
    <form action="./01引入js.html" method="get" onsubmit="fc10()">
        name: <input type="text" onfocus="fc6()" onblur="fc7()" onchange="fc8(this.value)">
        passward: <input type="password">
        选择籍贯:<select onchange="fc9(this.value)">
            <option>河南</option>
            <option>安徽</option>
            <option>湖北</option>
        </select>
        <input type="submit" value="submit">
        <input type="reset" value="reset">
    </form>
</body>
</html>